import React from 'react';
import { Typography, Empty, Spin, Button, List, Tag } from 'antd';
import { PageHeader } from '@ant-design/pro-layout';
import { goTo } from 'react-chrome-extension-router';
import { useQuery } from 'react-query';
import FeedRSS from './FeedRSS';

const { Title } = Typography;

const fetchApi = async () => {
    const res = await fetch(
        'https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.exploit-db.com%2Frss.xml&api_key=spbf63tt7rvx2r0wh2x6yoz00ssjyztpceqqkdj3&order_dir=desc&count=100'
    );
    return res.json();
};

export default function ExploitDB () {
    const { data, status, } = useQuery( 'exploitdb', fetchApi );

    interface IExploitDB {
        title: any;
        link: string;
        pubDate: string;
        description: string;
    }

    return (
        <div>
            <PageHeader
                onBack={() => goTo( FeedRSS )}
                title='Feed RSS'
                subTitle='Exploit-DB.com RSS Feed'
                extra={[
                    <Button href='https://exploit-db.com' target='blank' key='1' type='primary'>
                        Visit orignal website
                    </Button>
                ]}
            />
            {status === 'loading' && (
                <div style={{ textAlign: 'center' }}>
                    <Spin />
                    <Empty />
                </div>
            )}
            {status === 'error' && (
                <div>
                    <Empty
                        image='https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg'
                        imageStyle={{
                            height: 60
                        }}
                        description={<span>Error getting the data please contact us.</span>}
                    >
                        <Button danger>
                            <a
                                href='https://github.com/LasCC/Hack-Tools/issues'
                                rel='noreferrer noopener'
                                target='_blank'
                            >
                                Report the bug
                            </a>
                        </Button>
                    </Empty>
                </div>
            )}
            {status === 'success' && (
                <div
                    key='a'
                    style={{
                        padding: 15
                    }}
                >
                    <Title level={4} style={{ fontWeight: 'bold', marginTop: 15 }}>
                        Recent exploit
                    </Title>
                    <List
                        itemLayout='horizontal'
                        dataSource={data.items}
                        style={{ marginTop: 15 }}
                        renderItem={( list: IExploitDB ) => (
                            <List.Item
                                actions={[
                                    <div>
                                        {( () => {
                                            const name_tag = list.title.match( /[a-zA-Z]+/ )[ 0 ] ?? "";
                                            switch ( name_tag ) {
                                                case 'webapps':
                                                    return <Tag color='processing'>{name_tag}</Tag>;
                                                case 'local':
                                                    return <Tag color='magenta'>{name_tag}</Tag>;
                                                case 'dos':
                                                    return <Tag color='orange'>{name_tag}</Tag>;
                                                case 'remote':
                                                    return <Tag color='green'>{name_tag}</Tag>;
                                                default:
                                                    return 'None';
                                            }
                                        } )()}
                                    </div>,
                                    <Tag color='geekblue' style={{ marginLeft: 5 }}>
                                        {list.pubDate.slice(
                                            list.pubDate.indexOf( '20' ),
                                            list.pubDate.lastIndexOf( '0' ) - 8
                                        )}
                                    </Tag>
                                ]}
                            >
                                <a href={list.link} target='_blank' rel='noreferrer noopener'>
                                    {list.description}
                                </a>
                            </List.Item>
                        )}
                    />
                </div>
            )}
        </div>
    );
}
